<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Schedule</title>
	<link rel='stylesheet' type='text/css' href='css/dhtmlxscheduler_material.css?v=5.3.9'>

	<style type="text/css">
		html,
		body {
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
		}
	</style>
	
	<script src='js/dhtmlxscheduler.js?v=5.3.9' type="text/javascript" charset="utf-8"></script>
	<script src='js/dhtmlxscheduler_timeline.js?v=5.3.9' type="text/javascript" charset="utf-8"></script>
    <script  src="js/jquery-2.0.3.js" type="text/javascript"></script>
    
	<script type="text/javascript" charset="utf-8">
	var sections;			
	var sections1;
	var scheInfo;
	//  动态加载影厅(列)/电影名称/排期信息
	window.addEventListener("DOMContentLoaded", function() {
		$.post("getMH1",function(data){
			sections=data;	
			console.log(sections);
		});
		
		$.post("getMH2",function(data){
			sections1=data;	
			console.log(sections1);
		});
		
		$.get("getMoviceSche",function(data){
			scheInfo=data;	
			console.log(scheInfo);
		});
	});
	
	window.onload=function(){
		console.log("onload");
		scheduler.locale.labels.timeline_tab = "电影排期";
		scheduler.locale.labels.section_custom = "Section";
		scheduler.config.details_on_create = true;
		scheduler.config.details_on_dblclick = true;
		
		scheduler.createTimelineView({
			name: "timeline",
			x_unit: "hour",
			x_date: "%H:%i",
			x_step: 1,
			x_size: 15, //显示15小时
			x_start: 9,
			x_length: 24, //一页隔24小时
			y_unit: sections,
			y_property: "section_id",
			render: "bar",
			second_scale: {
				x_unit: "day", // unit which should be used for second scale
				x_date: "%F %d" // date format which should be used for second scale, "July 01"
			}
		});
		
		//弹出框信息
		scheduler.config.lightbox.sections = [{
			name: "编号",
			height: 23,
			map_to:"auto", 
			type:"template" 
	        },
	        {   
	        	name: "电影",
				height: 23,
				type: "select",
				options: sections1,
				map_to: "text"
			},
			{
				name: "影厅",
				height: 23,
				type: "select",
				options: sections,
				map_to: "section_id"
			},
			{
				name: "时间",
				height: 72,
				type: "time",
				map_to: "auto"
			}
		];

		scheduler.init('scheduler_here', new Date(), "timeline");
		//排期信息
		scheduler.parse(scheInfo);
	}	
	</script>

	<script>
		(function(i, s, o, g, r, a, m) {
			i['GoogleAnalyticsObject'] = r;
			i[r] = i[r] || function() {
				(i[r].q = i[r].q || []).push(arguments)
			}, i[r].l = 1 * new Date();
			a = s.createElement(o),
				m = s.getElementsByTagName(o)[0];
			a.async = 1;
			a.src = g;
			m.parentNode.insertBefore(a, m)
		})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

		ga('create', 'UA-11031269-1', 'auto');
		ga('send', 'pageview');
	</script>
	<script src="https://cdn.ravenjs.com/3.10.0/raven.min.js"></script>
	<script>
		Raven.config('https://b506cc95e6244203a69070d518196d06@sentry.dhtmlx.ru/7').install()
	</script>
</head>
<body>
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data" >
		</div>
	</div>
</body>
